<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
</head>

<body>
    <div class="wrap-box">
        <div class="w-100">
            <a href="index.html">懒加载</a>
            <a href="not-lazy.html">非懒加载</a>
            <a href="scroll-lazy.html">滚动条懒加载</a>
        </div>
        <img data-src="images/architecture-768432_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/castle-gd39222771_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/fall-g823587ea5_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/hintersee-3601004_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/kuala-lumpur-1820944_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/lighthouse-6581129_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/mountains-1761292_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/skater-g105217e59_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/tianjin-2185510_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/architecture-768432_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/castle-gd39222771_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/fall-g823587ea5_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/hintersee-3601004_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/kuala-lumpur-1820944_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/lighthouse-6581129_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/mountains-1761292_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/skater-g105217e59_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/tianjin-2185510_1920.jpg" alt="图片" width="49.8%">
    </div>
    <div id='showtitle'>
        消息提示
    </div>
</body>

</html>
<style>
    .wrap-box {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .wrap-box img {
        min-height: 400px;
        margin-top: 3px;
    }

    .w-100 {
        width: 100%;
    }
    #showtitle{
        position: fixed;
        background-color: rgba(0, 0, 0, 0.671);
        width: 180px;
        height: 50px;
        margin:auto;
        top:0;
        left: 0;
        right: 0;
        bottom:0;
        z-index: 10;
        border-radius: 5px;
        line-height: 50px;
        text-align: center;
        color: rgb(216, 216, 216);
        display: none;
    }
</style>
<script>
    let imgDoms = Array.from(document.querySelectorAll('img'));

    //判断元素是否在视口中
    function isIn(e) {
        let t = e.getBoundingClientRect();
        let clientHeight = window.innerHeight;
        return t.top <= clientHeight;
    }

    //判断滚动条是否到底
    function isbottom() {
        let r=document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
        return r<1;
    }

    //消息提示内容 string，显示毫秒数 number
    function showtitle(title,s){
        let dom= document.getElementById('showtitle');
        s=s? s : 1000;
        if (title) {
            dom.innerText=title;
        }
        dom.style.display='block';
        setTimeout(() => {
            dom.style.display='none';
        }, s);
    }

    //图片懒加载
    function imglazy() {
        imgDoms.forEach(item => {
            if (isIn(item)) {
                let datasrc = item.getAttribute('data-src');
                if (datasrc) {
                    item.src = datasrc;
                    item.removeAttribute('data-src');
                }
            }
        })
    }

    //无限图片
    function appchildImg() {
        if (isbottom()) {
            let content = document.getElementsByClassName('wrap-box')[0];
            //将已出现的dom图片进行随机组合
            let randomNum = Math.ceil(Math.random() * 10);
            for (let index = 0; index < randomNum; index++) {
                let r = Math.ceil(Math.random() * 10);
                content.appendChild(imgDoms[r])
            }
            showtitle('已添加'+randomNum+'张图片');
        }

    }

    window.onload = window.onscroll = function () {
        let timer = false;
        clearTimeout(timer)
        timer = setTimeout(() => {
            imglazy();
            appchildImg();
        }, 100)
    }
</script>